<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回复查询页面</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
    <style>
        /* 按钮形状 */
        .operation_btn {
            width: 30%;
            height: 100%;
            display: flex;
            justify-content: center;
        }

        #operation_btns > :first-child {
            background-color: #e8f5ee;
            color: #3dbc7d;
            border: solid 1px #3dbc7d;
        }

        #operation_btns > :first-child:hover {
            background-color: rgb(207, 239, 219);
            cursor: pointer;
        }

        #operation_btns > :first-child:active {
            background-color: rgb(148, 215, 169);
        }

        #operation_btns > :nth-child(2) {
            background-color: #fef8ec;
            color: #f6d69f;
            border: solid 1px #f6d69f;
        }

        #operation_btns > :nth-child(2):hover {
            background-color: rgb(248, 231, 215);
            cursor: pointer;
        }

        #operation_btns > :nth-child(2):active {
            background-color: rgb(220, 174, 132);
        }

        #operation_btns > :nth-child(3) {
            background-color: #fff4f2;
            color: #ebb7b7;
            border: solid 1px #ebb7b7;
        }

        #operation_btns > :nth-child(3):hover {
            background-color: rgb(255, 226, 226);
            cursor: pointer;
        }

        #operation_btns > :nth-child(3):active {
            background-color: rgb(227, 159, 159);
        }
    </style>
    <style>
        #length_options > * {
            padding: 5px;
            margin-bottom: 5px;
            border: 1px solid #ccc;
            cursor: pointer;
        }

        #length_options > *.selected {
            background-color: #ccc;
        }

        #adopt_options > * {
            padding: 5px;
            margin-bottom: 5px;
            border: 1px solid #ccc;
            cursor: pointer;
        }

        #adopt_options > *.selected {
            background-color: #ccc;
        }
    </style>
    <style>
        #attitude_options .radioOption {
            border: solid 1px #c3c3c3;
            text-align: center;
            color: #c3c3c3;
            border-radius: 8px;
            width: 20%;
        }
    </style>
    <style>
        * {
            user-select: none;
        }
    </style>
</head>
<body style="padding: 0; margin: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column">
<div style="margin: 10px auto 10px 2%; font-size: 20px">
    <i class="bi bi-list"></i>
    <span>评论回复</span>
</div>
<div id="root"
     style="display: flex; flex: 1; justify-content: space-evenly; align-items: center; width: 100%; height: 95%">
    <div id="left_block"
         style="display: flex; flex-direction: column; justify-content: space-evenly;width: 48%; height: 98%;
                border: solid 1px #a2a2a2; border-radius: 8px">
        <!--标题栏-->
        <div id="left_title" style="display: flex; background-color: #f3f3f3;width: 100%; border-radius: 8px 8px 0 0">
            <div style="margin: 10px auto 10px 10px">主题分析</div>
        </div>
        <!--表单-->
        <form action="" style="width: 100%; flex-grow: 1; display: flex; flex-direction: column">
            <!--搜索框-->
            <div class="input-group mb-3" style="width: 95%; margin: 20px auto 10px auto;">
                <button class="btn btn-light" type="button" id="button-addon1" style="border: solid 1px #a3a3a3">
                    <i class="bi bi-search" style="margin: auto 5px auto 10px"></i>
                </button>
                <input type="text" class="form-control" placeholder="try typing 'new'">
            </div>
            <!--推文输入-->
            <div style="user-select: none; margin: 10px auto 10px 3%">推文输入:</div>
            <textarea style="width: 95%; flex: 1; margin: 10px auto 10px auto;" class="form-control"
                      aria-label="With textarea"></textarea>
            <!--评论输入-->
            <div style="user-select: none; margin: 10px auto 10px 3%">评论输入:</div>
            <textarea style="width: 95%; flex: 1;margin: 10px auto 10px auto;" class="form-control"
                      aria-label="With textarea"></textarea>
            <!--若干选择-->
            <div id="options"
                 style="width: 92%; height: 20%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
                        margin: 0 auto;">
                <!--国家选择-->
                <div style="display: flex; width: 100%; font-size: 15px;">
                    <div style="width: 10%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                        国家选择:
                    </div>
                    <select class="form-select" aria-label="Default select example" style="flex: 1">
                        <option selected>Open this select menu</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </div>
                <!--两个选择-->
                <div style="width: 100%; display: flex; justify-content: space-evenly">
                    <!--平台选择-->
                    <div style="display: flex; width: 100%; font-size: 15px;">
                        <div style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                            平台选择:
                        </div>
                        <div class="btn-group">
                            <input type="radio" id="platform_option1" name="platform_options" class="btn-check"
                                   autocomplete="off">
                            <label class="btn btn-outline-secondary" for="platform_option1">Tweet</label>

                            <input type="radio" id="platform_option2" name="platform_options" class="btn-check"
                                   autocomplete="off">
                            <label class="btn btn-outline-secondary" for="platform_option2">Sina</label>
                        </div>
                    </div>
                    <!--模型选择-->
                    <div style="display: flex; width: 100%; font-size: 15px;">
                        <div style="white-space: nowrap; text-align: right; margin: auto 20px auto 0; user-select: none">
                            模型选择:
                        </div>
                        <div class="btn-group">
                            <input type="radio" id="model_option1" name="model_options" class="btn-check"
                                   autocomplete="off">
                            <label class="btn btn-outline-secondary" for="model_option1">Chatgpt</label>

                            <input type="radio" id="model_option2" name="model_options" class="btn-check"
                                   autocomplete="off">
                            <label class="btn btn-outline-secondary" for="model_option2">Chatglm</label>
                        </div>
                    </div>
                </div>
            </div>

            <!--操作选项-->
            <div id="operation_btns"
                 style="width: 92%; display: flex;justify-content: space-between;align-items: center;user-select:None; margin: auto">
                <div class="btn operation_btn" value="like_cnt" onclick="handleOperation_left('analyse')">
                    <div>分析</div>
                </div>
                <div class="btn operation_btn" value="comment_cnt" onclick="handleOperation_left('flush')">
                    <div>刷新</div>
                </div>
                <div class="btn operation_btn" value="transfer_cnt" onclick="handleOperation_left('copy')">
                    <div>备份</div>
                </div>
            </div>

            <!--term-->
            <div style="display: flex; width: 92%; font-size: 15px; margin: 10px auto 10px auto">
                <div style="width: 10%; white-space: nowrap; text-align: right; margin: auto 20px auto 0; user-select: none">
                    term:
                </div>
                <input type="text" class="form-control" style="flex: 1">
            </div>

            <!--Category-->
            <div style="display: flex; width: 92%; font-size: 15px; margin: 10px auto 10px auto">
                <div style="width: 10%; white-space: nowrap; text-align: right; margin: auto 20px auto 0; user-select: none">
                    Category:
                </div>
                <input type="text" class="form-control" style="flex: 1">
            </div>

        </form>
    </div>

    <div id="right_block"
         style="display: flex; flex-direction: column; justify-content: space-evenly;width: 48%; height: 98%;
                border: solid 1px #a2a2a2; border-radius: 8px">
        <!--标题栏-->
        <div id="right_title"
             style="display: flex; align-items: center; background-color: #f3f3f3;width: 100%; border-radius: 8px 8px 0 0">
            <div style="margin: 10px 5px 10px 10px">文本回复</div>
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch" id="identitySet">
                <label class="form-check-label" for="identitySet" id="identitySet_label">启用身份集</label>
            </div>
        </div>
        <!--表单-->
        <form action="" style="width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center">
            <!--身份-->
            <div id="identity_options"
                 style="display: flex; flex-direction: column; justify-content: space-between; height: 10%;width: 95%;margin: 20px auto 0 auto;">
                <div style="display: flex; ">
                    <div style="text-align: right; width: 20%">
                        身份/Identity:
                    </div>
                    <div style="flex: 1; display:flex; max-width: 80%; justify-content: space-evenly">
                        <div type="button" class="radioOption identity_opts selected" id="identity_option1"
                             onclick="identitySelection('identity_option1')">
                            <i style="border: solid 2px #71a5d4" class="bi bi-question"></i>
                            选项一
                        </div>
                        <div type="button" class="radioOption identity_opts" id="identity_option2"
                             onclick="identitySelection('identity_option2')">
                            <i style="border: solid 2px #e8e8e8" class="bi bi-question"></i>
                            选项二
                        </div>
                        <div type="button" class="radioOption identity_opts" id="identity_option3"
                             onclick="identitySelection('identity_option3')">
                            <i style="border: solid 2px #e8e8e8" class="bi bi-question"></i>
                            选项三
                        </div>
                        <div type="button" class="radioOption identity_opts" id="identity_option4"
                             onclick="identitySelection('identity_option4')">
                            <i style="border: solid 2px #e8e8e8" class="bi bi-question"></i>
                            选项四
                        </div>
                    </div>
                </div>
                <div style="display: flex; ">
                    <div style="width: 20%"></div>
                    <div style="flex: 1; display:flex; max-width: 80%; justify-content: space-evenly">
                        <div type="button" class="radioOption identity_opts" id="identity_option5"
                             onclick="identitySelection('identity_option5')">
                            <i style="border: solid 2px #e8e8e8" class="bi bi-question"></i>
                            选项五
                        </div>
                        <div type="button" class="radioOption identity_opts" id="identity_option6"
                             onclick="identitySelection('identity_option6')">
                            <i style="border: solid 2px #e8e8e8" class="bi bi-question"></i>
                            选项六
                        </div>
                        <div type="button" class="radioOption identity_opts" id="identity_option7"
                             onclick="identitySelection('identity_option7')">
                            <i style="border: solid 2px #e8e8e8" class="bi bi-question"></i>
                            选项七
                        </div>
                        <div type="button" class="radioOption identity_opts" id="identity_option8"
                             onclick="identitySelection('identity_option8')">
                            <i style="border: solid 2px #e8e8e8" class="bi bi-question"></i>
                            选项八
                        </div>
                    </div>
                </div>
            </div>
            <!--态度-->
            <div id="attitude_options"
                 style="display: flex; flex-direction: column; justify-content: space-between; height: 10%;width: 95%;margin: 20px auto 0 auto;">
                <div style="display: flex; ">
                    <div style="text-align: right; width: 20%">
                        态度/Attitude:
                    </div>
                    <div style="flex: 1; display:flex; max-width: 80%; justify-content: space-evenly">
                        <div type="button" class="radioOption attitude_opts selected selected" id="attitude_option1"
                             onclick="attitudeSelection('attitude_option1')"
                             style="color: #6297c2; border-color: #c2d1d6; background-color: #edf6fd">
                            选项一
                        </div>
                        <div type="button" class="radioOption attitude_opts" id="attitude_option2"
                             onclick="attitudeSelection('attitude_option2')">
                            选项二
                        </div>
                        <div type="button" class="radioOption attitude_opts" id="attitude_option3"
                             onclick="attitudeSelection('attitude_option3')">
                            选项三
                        </div>
                    </div>
                </div>
                <div style="display: flex; ">
                    <div style="width: 20%"></div>
                    <div style="flex: 1; display:flex; max-width: 80%; justify-content: space-evenly">
                        <div type="button" class="radioOption attitude_opts" id="attitude_option4"
                             onclick="attitudeSelection('attitude_option4')">
                            选项四
                        </div>
                        <div type="button" class="radioOption attitude_opts" id="attitude_option5"
                             onclick="attitudeSelection('attitude_option5')">
                            选项五
                        </div>
                        <div type="button" class="radioOption attitude_opts" id="attitude_option6"
                             onclick="attitudeSelection('attitude_option6')">
                            选项六
                        </div>
                    </div>
                </div>
            </div>
            <!--长度选择-->
            <div style="display: flex; width: 95%; font-size: 15px; margin: 20px auto 0 auto">
                <div style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                    长度选择:
                </div>
                <div id="length_options"
                     style="display:flex;justify-content: space-evenly;flex: 1;max-width: 80%;text-align: center">
                    <div class="radioOption len_class selected" id="length_option1"
                         onclick="lengthSelection('length_option1')"
                         style="width: 45%; color: #6297c2; border-color: #c2d1d6; background-color: #edf6fd">>30
                    </div>
                    <div class="radioOption len_class" id="length_option2" onclick="lengthSelection('length_option2')"
                         style="width: 45%"><=30
                    </div>
                </div>
            </div>
            <!--argument-->
            <div style="display: flex; width: 95%; font-size: 15px; margin: 20px auto 0 auto">
                <div style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                    Adopt the argument:
                </div>
                <div id="adopt_options"
                     style="display:flex;justify-content: space-evenly;flex: 1;max-width: 80%;text-align: center">
                    <div class="radioOption adopt_class selected" id="adopt_option1"
                         onclick="adoptSelection('adopt_option1')"
                         style="width: 45%; color: #efd8a3; border-color: #f0e8cb; background-color: #fef8ec">Yes
                    </div>
                    <div class="radioOption adopt_class" id="adopt_option2" onclick="adoptSelection('adopt_option2')"
                         style="width: 45%">No
                    </div>
                </div>
            </div>
            <!--角色设定-->
            <div style="display: flex; width: 95%; font-size: 15px;margin: 20px auto">
                <div style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                    角色选择:
                </div>
                <select class="form-select" aria-label="Default select example" style="flex: 1">
                    <option selected>请选择角色</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
            <!--操作选项-->
            <div id="operation_btns"
                 style="width: 92%; display: flex;justify-content: space-between;align-items: center;user-select:None; margin: auto">
                <div class="btn operation_btn" value="like_cnt" onclick="handleOperation_right('analyse')">
                    <div>分析</div>
                </div>
                <div class="btn operation_btn" value="comment_cnt" onclick="handleOperation_right('flush')">
                    <div>刷新</div>
                </div>
                <div class="btn operation_btn" value="transfer_cnt" onclick="handleOperation_right('copy')">
                    <div>备份</div>
                </div>
            </div>
            <!--回复框？-->
            <textarea style="width: 95%; flex: 1; margin: 10px auto 10px auto;" class="form-control"></textarea>
        </form>
    </div>
</div>

<script>

    function handleOperation_left(operation) {
        console.log("left" + operation)
    }

    function handleOperation_right(operation) {
        console.log("left" + operation)
    }

    function identitySelection(optionId) {
        console.log(optionId)
        // 移除先前选中的选项样式
        let previousOption = document.querySelector('.identity_opts.selected');
        console.log(previousOption)
        console.log(previousOption.children)
        previousOption.querySelector('i').style.borderColor = '#e6e6e6'
        if (previousOption) {
            previousOption.classList.remove('selected');
        }

        // 添加选中的选项样式
        let selectedOption = document.getElementById(optionId);
        selectedOption.classList.add('selected');

        // 可以在这里执行其他操作，例如更新相关元素的内容或执行其他自定义逻辑
        selectedOption.querySelector('i').style.borderColor = '#71a5d4'
    }

    function attitudeSelection(optionId) {
        console.log(optionId)
        // 移除先前选中的选项样式
        let previousOption = document.querySelector('.attitude_opts.selected');
        if (previousOption) {
            previousOption.classList.remove('selected');
        }

        // 添加选中的选项样式
        console.log(previousOption)
        console.log(previousOption.children)
        previousOption.style.borderColor = '#c3c3c3'
        previousOption.style.backgroundColor = ''
        previousOption.style.color = '#c3c3c3'

        // 添加选中的选项样式
        let selectedOption = document.getElementById(optionId);
        selectedOption.classList.add('selected');

        // 可以在这里执行其他操作，例如更新相关元素的内容或执行其他自定义逻辑
        selectedOption.style.borderColor = '#c2d1d6'
        selectedOption.style.backgroundColor = '#edf6fd'
        selectedOption.style.color = '#6297c2'
    }

    function lengthSelection(optionId) {
        // 移除先前选中的选项样式
        let previousOption = document.querySelector('.len_class.selected');
        if (previousOption) {
            previousOption.classList.remove('selected');
        }

        // 添加选中的选项样式
        previousOption.style.borderColor = '#c3c3c3'
        previousOption.style.backgroundColor = ''
        previousOption.style.color = '#c3c3c3'

        // 添加选中的选项样式
        let selectedOption = document.getElementById(optionId);
        selectedOption.classList.add('selected');

        // 可以在这里执行其他操作，例如更新相关元素的内容或执行其他自定义逻辑
        selectedOption.style.borderColor = '#c2d1d6'
        selectedOption.style.backgroundColor = '#edf6fd'
        selectedOption.style.color = '#6297c2'
    }

    function adoptSelection(optionId) {
        // 移除先前选中的选项样式
        let previousOption = document.querySelector('.adopt_class.selected');
        if (previousOption) {
            previousOption.classList.remove('selected');
        }

        // 添加选中的选项样式
        previousOption.style.borderColor = '#c3c3c3'
        previousOption.style.backgroundColor = ''
        previousOption.style.color = '#c3c3c3'

        // 添加选中的选项样式
        let selectedOption = document.getElementById(optionId);
        selectedOption.classList.add('selected');

        // 可以在这里执行其他操作，例如更新相关元素的内容或执行其他自定义逻辑
        selectedOption.style.borderColor = '#f0e8cb'
        selectedOption.style.backgroundColor = '#fef8ec'
        selectedOption.style.color = '#efd8a3'
    }

    document.addEventListener('DOMContentLoaded', function () {

        let switchElement = document.getElementById('identitySet');
        let switchLabelElement = document.getElementById('identitySet_label');

        // 监听开关状态改变
        switchElement.addEventListener('change', function () {
            // 获取开关状态
            let isChecked = switchElement.checked;

            console.log(isChecked)

            // 根据开关状态更新文本内容
            if (isChecked) {
                console.log(isChecked)
                switchLabelElement.textContent = '描述信息+角色';
            } else {
                console.log(isChecked)
                switchLabelElement.textContent = '启用身份集';
            }
        });
    });
</script>

</body>
</html>